<!-- 弹窗控件设置面板 -->
<template>
    <el-tabs modelValue="widget" stretch>
        <el-tab-pane :label="`${widget.widgetData.component.title}组件`" name="widget">
            <el-scrollbar>
                <!-- 快速制作 -->
                <row-fast-make :widget="widget" />

                <!-- 组件名称 -->
                <row-component-name :widget="widget" />

                <!-- 子组件 -->
                <row-sub-components :widget="widget" />

                <!-- 子元素 -->
                <row-child-element :widget="widget" />

                <el-collapse modelValue="1">
                    <el-collapse-item title="触发设置" name="1">
                        <layout-pane label="自动弹出">
                            <el-switch v-model="widget.widgetData.eles.customFeature.autoPopup" />
                        </layout-pane>

                        <template v-if="widget.widgetData.eles.customFeature.autoPopup">
                            <layout-pane label="弹出时机">
                                <si-select
                                    v-model="widget.widgetData.eles.customFeature.popupScene"
                                    :list="[
                                        { label: '每天进入页面', value: 'everyDay' },
                                        { label: '每次进入页面', value: 'everyTime' },
                                        { label: '首次授权后弹出', value: 'firstAuthorize' }
                                    ]"
                                />
                            </layout-pane>
                        </template>
                        <div class="tip-txt">注：弹窗的弹出设置还有其他设置（在设置点击事件的功能项中选择弹窗控制，弹出弹窗）</div>
                    </el-collapse-item>
                </el-collapse>

                <el-collapse modelValue="1">
                    <el-collapse-item title="关闭设置" name="1">
                        <layout-pane label="自动关闭">
                            <el-switch v-model="widget.widgetData.eles.customFeature.autoClose" />
                        </layout-pane>

                        <template v-if="widget.widgetData.eles.customFeature.autoClose">
                            <layout-pane label="几秒后关闭">
                                <si-input-number
                                    v-model="widget.widgetData.eles.customFeature.closeDelay"
                                    :min="0"
                                />
                            </layout-pane>
                        </template>

                        <layout-pane label="点击阴影区域关闭弹窗">
                            <el-switch v-model="widget.widgetData.eles.customFeature.tapMaskClose" />
                        </layout-pane>

                        <div class="tip-txt">注：弹窗的关闭设置还有其他设置（在设置点击事件的功能项中选择弹窗控制，关闭弹窗）</div>
                    </el-collapse-item>
                </el-collapse>
                
                <!-- 元素可见设置 -->
                <row-element-visible :widget="widget" />
            </el-scrollbar>
        </el-tab-pane>

        <el-tab-pane label="组件样式" name="style">
            <el-scrollbar>
                <el-collapse modelValue="1">
                    <el-collapse-item title="组件设置" name="1">
                        <!-- 大小 -->
                        <row-size :widget="widget" />

                        <!-- 位置 -->
                        <el-divider></el-divider>
                        <row-position :widget="widget" />

                        <el-divider></el-divider>
                        <layout-pane label="背景">
                            <si-color-picker
                                v-model="widget.widgetData.eles.style['background-color']"
                                label="背景色"
                                show-alpha
                            />
                        </layout-pane>
                    </el-collapse-item>
                </el-collapse>
                
                <el-collapse modelValue="1">
                    <el-collapse-item title="蒙层设置" name="1">
                        <layout-pane label="颜色">
                            <si-color-picker
                                v-model="widget.widgetData.eles.customFeature.maskBackgroundColor"
                                show-alpha
                            />
                        </layout-pane>

                        <!-- 透明 -->
                        <el-divider></el-divider>
                        <si-opacity v-model="widget.widgetData.eles.customFeature.maskOpacity" />
                    </el-collapse-item>
                </el-collapse>
            </el-scrollbar>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import { defineComponent, toRefs } from 'vue'
import LayoutPane from '@/components/setting-pane/layout-pane'
import {
    SiInputNumber,
    SiOpacity,
    SiSelect,
    SiColorPicker
} from '@/components/setting-pane/setting-item'
import {
    RowFastMake,
    RowSubComponents,
    RowChildElement,
    RowComponentName,
    RowSize,
    RowPosition,
    RowElementVisible
} from '../../widget-setting-row'
export default defineComponent({
    name: 'PopupWindowSetting',
    components: {
        LayoutPane,
        SiInputNumber,
        SiOpacity,
        SiSelect,
        SiColorPicker,
        RowFastMake,
        RowSubComponents,
        RowChildElement,
        RowComponentName,
        RowSize,
        RowPosition,
        RowElementVisible
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        return {
            widget
        }
    }
})
</script>

<style lang="less" scoped>
.tip-txt {
    color: var(--edit-color-info);
    font-size: 12px;
    margin-top: 10px;
}
</style>